封装的一个 BottomTabBar组件

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class BottomTabBar extends StatefulWidget {
  @override
  _TabBarState createState() => new _TabBarState(
      this.normalIcons,
      this.selectedIcons,
      this.titles,
      this.pages,
      this.normalColor,
      this.selectedColor,
      this.fontSize);

  BottomTabBar(
      {Key key,
      this.normalIcons,
      this.selectedIcons,
      this.titles,
      this.pages,
      this.normalColor = Colors.grey,
      this.selectedColor = Colors.green,
      this.fontSize = 10.0})
      : assert(normalIcons != null),
        assert(selectedIcons != null),
        assert(titles != null),
        assert(pages != null),
        super(key: key);

  final List<Widget> normalIcons;
  final List<Widget> selectedIcons;
  final List<String> titles;
  final List<Widget> pages;
  final Color normalColor;
  final Color selectedColor;
  final double fontSize;
}

class _TabBarState extends State<BottomTabBar> {
  final List<Widget> normalIcons;
  final List<Widget> selectedIcons;
  final List<String> titles;
  final List<Widget> pages;
  final Color normalColor;
  final Color selectedColor;
  final double fontSize;

  int _tabIndex = 0;

  _TabBarState(this.normalIcons, this.selectedIcons, this.titles, this.pages,
      this.normalColor, this.selectedColor, this.fontSize);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(titles[_tabIndex],
            style: new TextStyle(color: Colors.white)),
      ),
      body: new IndexedStack(
        children: pages,
        index: _tabIndex,
      ),
      bottomNavigationBar: new CupertinoTabBar(
        items: () {
          List<BottomNavigationBarItem> items = [];
          for (int i = 0; i < normalIcons.length; i++) {
            items.add(new BottomNavigationBarItem(
                icon: i == _tabIndex ? selectedIcons[i] : normalIcons[i],
                title: new Text(titles[i],
                    style: new TextStyle(
                        fontSize: fontSize))));
          }
          return items;
        }(),
        activeColor: selectedColor,
        inactiveColor: normalColor,
        currentIndex: _tabIndex,
        onTap: (index) {
          setState(() {
            _tabIndex = index;
          });
        },
      ),
    );
  }
}

BottomTabBar的使用

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'pages/DiscoveryPage.dart';
import 'pages/MyInfoPage.dart';
import 'pages/NewsListPage.dart';
import 'pages/TweetsListPage.dart';
import 'BottomTabBar.dart';


void main() {
  List<Widget> selectedIcons = [
    new Image.asset(
        'images/ic_nav_news_actived.png', width: 20.0, height: 20.0),
    new Image.asset(
        'images/ic_nav_tweet_actived.png', width: 20.0, height: 20.0),
    new Image.asset(
        'images/ic_nav_discover_actived.png', width: 20.0, height: 20.0),
    new Image.asset('images/ic_nav_my_pressed.png', width: 20.0, height: 20.0)
  ];
  List<Widget> normalIcons = [
    new Image.asset('images/ic_nav_news_normal.png', width: 20.0, height: 20.0),
    new Image.asset(
        'images/ic_nav_tweet_normal.png', width: 20.0, height: 20.0),
    new Image.asset(
        'images/ic_nav_discover_normal.png', width: 20.0, height: 20.0),
    new Image.asset('images/ic_nav_my_normal.png', width: 20.0, height: 20.0)
  ];

  List<Widget> pages = [
    new NewsListPage(),
    new TweetsListPage(),
    new DiscoveryPage(),
    new MyInfoPage()
  ];

  runApp(new MaterialApp(title: 'tabbar',
      theme: new ThemeData(primaryColor: Colors.green),
      home: new BottomTabBar(
        normalIcons: normalIcons,
        selectedIcons: selectedIcons,
        pages: pages,
        titles: ['资讯', '动态', '发现', '我的'],
        normalColor: Colors.grey,
        selectedColor: Colors.green,
        fontSize: 10.0,
      )));
}

效果

Simulator Screen Shot - iPhone X - 2018-08-16 at 19.02.02.png